<template>
	<view class="search">

		<view @click="handelclick">
			<uni-search-bar :show="false" :disabled="true" :radius="100" cancelButton="none"
				placeholder="请输入选择部件名称"></uni-search-bar>
		</view>
		<view class="choiceList">
			<view class="choice_tit" v-if="initSelected.length">已选择</view>
			<view class="choice_cont">
				<view class="conts" v-for="(item, index) in 
			initSelected" :key="item.checkContentId">{{ item.checkContentName }}
					<image class="close" src="/static/images/close.png" @click="removeclick(index, initSelected)">
					</image> 
				</view>
			</view>
		</view>
		<button class="save flex" @click="handleSave(initSelected)" :disabled="loading">保存</button>
		<zhilin-picker v-model="show" :title="title" :data="list" :initSelected="initSelected" :showSearch="true"
			@change="onChange" @confirm="onConfirm" />

	</view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import zhilinPicker from '@/components/zhilin-picker/zhilin-picker.vue';
import { getPart, addRecord, deleteCheckContent } from '@/apis/repair.js';
export default {
	// name:"search",
	data() {
		return {
			show: false,
			title: '选择部件',
			// data:[],
			list: [],
			initSelected: [],
			planId: '',
			groupId: '',
			status: '',
			loading: false

		};
	},
	// created(opt) {
	// 	const a = [];
	// },
	components: {
		uniSearchBar,
		zhilinPicker
	},
	onLoad(opt) {
		const result = JSON.parse(opt.params);
		// console.log(result,"onload的值111")
		this.initSelected = result.list;
		this.planId = result.planId;
		this.groupId = result.groupId;
		this.status = result.status;
		// console.log(this.planId)
		this.queryPartList();
	},
	methods: {
		queryPartList() {
			getPart({ current: 1, size: 1000, planId: this.planId })
				.then(res => {
					if (res) {
						console.log(res);
						this.list = [];
						this.list = res.data.records.map(item => {
							return {
								checkContentName: item.name,
								checkContentId: item.id
							};
						});
					}
				});
		},
		removeclick(index, list) {
			// console.log("xiaggggggggg")
			// console.log(index,list,this.groupId,"this.groupId")
			// return
			uni.showModal({
				content: '确定要删除该部件吗？',
				cancelText: '否',
				confirmText: '是',
				success: (res) => {
					if (res.confirm) {
						// 如果是修改,需要发送请求
						if (this.groupId) {
							uni.showLoading({
								title: '删除中'
							});
							deleteCheckContent({ planId: this.planId, checkContentId: list[index].checkContentId })
								.then(res => {
									console.log(res, '删除接口');
									if (res) {
										uni.hideLoading();
										this.initSelected.splice(index, 1);
									}
								});
						} else {
							this.initSelected.splice(index, 1);
						}

						// uni.$emit('update',this.initSelected)
					}
				}
			});
		},
		// 出现下拉框
		handelclick() {
			this.show = true;
		},
		onChange() {
			// console.log(val,'onchange')
		},
		// 确定按钮
		onConfirm(val) {
			// console.log(val,'获取数据')
			this.initSelected = val;
			// console.log(this.initSelected,"this.initSelected")
			// uni.$emit('update',this.initSelected)
			// this.handAdd(val)
		},
		handAdd(list) {
			this.loading = true;
			uni.showLoading({
				title: '加载中'
			});
			const temp = list.map(({ checkContentId, checkContentName, id }) => {
				const res = {
					planId: this.planId,
					checkContentId,
					checkContentName
				};
				return id ? { id, ...res } : { ...res, groupId: this.groupId, status: this.status };
			});
			// console.log(temp,"temp的值")
			addRecord(temp)
				.then(res => {
					if (res) {
						// console.log(res,"新增")
						// this.groupId=res.data
						this.groupId = this.groupId ? this.groupId : res.data;
						uni.hideLoading();
						const params = {
							groupId: this.groupId
						};
						setTimeout(() => {
							this.loading = false;
							// eslint-disable-next-line vue/custom-event-name-casing
							uni.$emit('repairUpdate', params);
							uni.navigateBack();
						}, 500);
					}
				});
		},
		// // 删除
		// handleDel(){
		// 	deleteCheckContent()
		// },
		handleSave(list) {
			if (list.length === 0) {
				uni.showToast({
					title: '部件不能为空',
					icon: 'none'
				});
			} else {
				this.handAdd(list);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffff;
}

.choiceList {

	padding: 20rpx;
	background-color: #FFFFFF;

	.choice_tit {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;

	}

	.choice_cont {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		text-align: center;

		.conts {
			height: 50rpx;
			padding: 10rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			background: #edf7ff;
			border-radius: 8rpx;
			opacity: 1;
			font-size: 26rpx;
			font-weight: 400;
			text-align: center;
			color: #0091ff;
			line-height: 50rpx;
			margin: 10rpx;
			position: relative;

			.close {
				position: absolute;
				right: -1px;
				bottom: -1px;
				width: 40rpx;
				height: 40rpx;
			}

		}
	}
}

.save {
	height: 70rpx;
	color: #fff;
	background-color: #0091FF;
	border-radius: 8rpx;
	margin: 0 20rpx;
	font-size: 28rpx;
	size: 1;

}
</style>
